import React from 'react'

class TodoItem extends React.Component {
    render() {
        const {data,index,completeItem,removeItem} = this.props
        return (
            <tr className={data.done ? 'table-success' : ''}>
                <th scope="row">{index + 1}</th>
                <td>{data.todo}</td>
                <td>{data.date}</td>
                <td>{data.done ? '是' : '否'}</td>
                <td>
                    <i className="bi bi-check-square me-3" onClick={completeItem.bind(null, data.id)}></i>
                    <i className="bi bi-x-square" onClick={removeItem.bind(null, data.id)}></i>

                </td>
            </tr>
        )
    }
}

export default TodoItem;